<template>
  <div class="wrapper">
    <div class="history" @click="jump('ensureList')">历史记录</div>
    <div class="icon"><img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/bzjImg.png"></div>
    <div class="price">{{guaranteeAmount}}元</div>
    <div class="title">会员保证金</div>
    <button v-if="guaranteeStatus == '1'" class="withdraw" @click="showDialog = true">提现</button>
    <div v-if="guaranteeStatus == '2'" class="status" @click="jump('ensureDetail')">退款中 ></div>

    <div class="dialog" v-if="showDialog">
      <div class="dialog_main">
        <div class="tips">
          确认退还保证金吗？
        </div>
        <div class="dialog_footer foot" style="padding-top: 90rpx">
          <button class="rightbtn" @click="showDialog = false">再想想</button>
          <button class="leftbtn" :disabled="disable" @click="withdraw">确认</button>
        </div>
      </div>

    </div>

    <div class="dialog" v-if="showError">
      <div class="dialog_main" style="padding-top: 70rpx;padding-bottom: 50rpx;height: auto">
        <img class="errorIcon" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_dis@2x.png">
        <div class="errorMsg">{{errorMsg}}</div>
        <div class="dialog_footer foot" style="padding-top: 60rpx">
          <button class="leftbtn" style="width: 480rpx" @click="showError = false">我知道了</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {

    data() {
      return {
        disable: false,
        guaranteeAmount: '',
        guaranteeStatus: '',
        withdrawApplicationId: '',
        showDialog: false,
        showError: false,
        errorMsg: ''
      }
    },
    onUnload() {
      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {
      this.guaranteeAmount = options.guaranteeAmount
      this.guaranteeStatus = options.guaranteeStatus
      this.withdrawApplicationId = options.withdrawApplicationId
    },
    methods: {
      jump(page) {
        if (page == 'ensureDetail') {
          wx.navigateTo({
            url: `../${page}/main?withdrawApplicationId=${this.withdrawApplicationId}`
          })
        } else {
          wx.navigateTo({
            url: `../${page}/main`
          })
        }
      },
      withdraw() {
        Service.refundAuditing().then((res) => {
            if (res.code == 200) {
              wx.redirectTo({
                url: `../ensureDetail/main?withdrawApplicationId=${res.data.withdrawApplicationId}`
              })
            } else {
              this.showDialog = false
              this.errorMsg = res.message
              this.showError = true
            }
          })
      },
    }
  }
</script>

<style scoped>

  .wrapper {
    min-height: 100vh;
    background: #fff;
    text-align: center;
  }
  .history{
    position: fixed;
    top: 20px;
    right: 30px;
    font-size:28px;
    color:rgba(102,102,102,1);
    line-height:40px;
  }
  .icon{
    padding-top: 257px;
  }
  .icon img{
    width: 176px;
    height: 152px;
  }
  .price{
    padding: 32px 0 20px;
    font-size:60px;
    color:rgba(51,51,51,1);
    line-height:84px;
  }
  .title{
    font-size:26px;
    color:rgba(153,153,153,1);
    line-height:37px;
  }
  .withdraw{
    position: fixed;
    left: 50px;
    bottom:150px;
    width:650px;
    height:90px;
    line-height: 90px;
    background:rgba(254,209,48,1);
    border-radius:45px;
    font-size:30px;
    color:rgba(255,255,255,1);
  }
  .errorIcon{
    width: 120px;
    height: 120px;
  }
  .errorMsg{
    padding-top: 50px;
    text-align: center;
    font-size:30px;
    color:rgba(51,51,51,1);
    line-height:48px;
  }
  .status{
    position: fixed;
    left: 0;
    bottom: 60px;
    width: 100%;
    font-size:30px;
    color:rgba(254,209,48,1);
    line-height:42px;
    text-align: center;
  }
</style>
